<template>
    <div class="musiclist">
    	<div class="back iconfont icon-back  yellow" @click="back"></div>
    	<div class="title xxl" v-html="title"></div>
    	<div class="bgImage" :style="bgStyle" ref="bgImage">
    		<div @click="random" class="playBtn center" ref="playBtn" v-show="songs.length>0">
    			<i class="iconfont icon-toplay xxl play"></i>
				<span class="l">随机播放全部</span>
    		</div>
    	</div>
      <div class="bg-layer" ref='layer'></div>
      <scroll :data="songs"
      @scroll="scroll"
      :probe-type="probeType"
       :listen-scroll="listenScroll"
       class="songs" ref="list">
        <div class="song-list-wrapper" >
          <song-list :rank="rank" :songs="songs" @select="selectItem">
        </song-list>
        </div>
      </scroll>
       <div v-show="!songs.length" class="loading-container">
        <loading></loading>
      </div>
      </div>

</template>

<script type="text/ecmascript-6">
import scroll from 'base/scroll/scroll';
import Loading from 'base/loading/loading';
import songList from 'base/songlist/songlist';
import {mapActions} from 'vuex';
import {playlistMixin} from 'common/js/mixin'

  const RESERVED_HEIGHT = 40
export default{
  name:'',
  mixins: [playlistMixin],
  props:{
  	bgImage:{
  		type:String,
  		default:''
  	},
  	songs:{
  		type:Array,
  		default:''
  	},
  	title:{
  		type:String,
  		default:''
  	},
  	rank:{
  		type:Boolean,
  		default:false
  	},
  },
  // dom渲染完毕,重载设置高度
  mounted(){
    this.imageHeight=this.$refs.bgImage.clientHeight;
    this.mintranslateY=RESERVED_HEIGHT-this.imageHeight;
   this.$refs.list.$el.style.top=`${this.imageHeight}px`
  },
  // 创建
  created(){
    this.probeType=3;
    this.listenScroll = true
  },
  computed:{
    // 设置背景图
  	bgStyle(){
  		return `background-image:url(${this.bgImage})`
  	}
  },
  methods:{
    // 设置 playlist
    handlePlaylist(playlist){
      const bottom=playlist.length>0?'60px':'';
      this.$refs.list.$el.style.bottom=bottom;
      this.$refs.list.refresh()
    },
    // 选择 项目
    selectItem(item, index) {
        this.selectPlay({
          list: this.songs,
          index
        })
      },
    // 监听滚动 
    scroll(pos){
      this.scrollY=pos.y
    },
    //返回
    back(){
      this.$router.back()
    },
    // 随机播放
    random(){
      this.randomPlay({
        list:this.songs
      })
    },
    // action 模拟一个事件,修改state
    ...mapActions([
        'selectPlay',
        'randomPlay'
      ])
  },
  watch:{
    // scrollY 监听滚动
   scrollY(newY){
    let tranlateY=Math.max(this.mintranslateY,newY);
    let zIndex=0;
    let scale=1;
    let blur=0;
    this.$refs.layer.style['transform']=`translate3d(0,${tranlateY}px,0)`
    const prcent=Math.abs(newY/this.imageHeight)
    if(newY>0){
         scale=1+prcent;
    }else{
      blur=Math.min(20*prcent,20)
    }
if (newY < this.mintranslateY) {
          zIndex = 1;
          this.$refs.bgImage.style.paddingTop = 0;
          this.$refs.bgImage.style.height = `${RESERVED_HEIGHT}px`;
          this.$refs.playBtn.style.display = 'none';
    }else{
        this.$refs.bgImage.style.paddingTop='70%';
      this.$refs.bgImage.style.height=0;
        this.$refs.playBtn.style.display = '';
    }
    this.$refs.bgImage.style.zIndex=zIndex;
    this.$refs.bgImage.style['transform']=`scale(${scale})`;
   }
  },
  data(){ return{
    scrollY:0
  }},
  components:{scroll,songList,Loading}
}
</script>

<style rel="stylesheet" lang="less">
     .musiclist{
  	position: fixed;
    z-index: 3;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #222;
    .back{
    	position: absolute;
    	font-size: 24px;
    	z-index: 2;
    	padding: 0.5rem;
    }
    .title{
    	position: absolute;
    	z-index: 2;
    	line-height: 40px;
    	color: #fff;
    	width: 80%;
    	left: 10%;
    	text-align: center;
    }
    .bgImage{
    	position: relative;
    	width: 100%;
    	height: 0;
    	padding-top: 70%;
      transform-origin:top;
    	background-size: cover;
    }
    .playBtn{
    	position: absolute;
      left:50%;
      transform:translateX(-50%);
    	bottom: 20px;
    	z-index: 2;
    	margin:0 auto;
		padding:0.3rem 0.6rem;
		border-radius:1.2rem;
		color:#ffcd32;
		border:1px solid ;
    }
    .songs{
      position: fixed;
      top: 0;
      width: 100%;
      bottom: 0;
    }
    .bg-layer{
    position: relative;
    height: 100%;
    background: #222;
    }
  }
.loading-container{
   position: absolute;
        width: 100%;
        top: 50%;
        transform: translateY(-50%);
}
</style>
